<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/zl.png" alt="">
      </div>
      <h2>总览信息<span v-if="$store.state.building">东湖花园小区{{ $store.state.listData.infoS[0].buildNo < 10 ? (Array(2).join(0) + $store.state.listData.infoS[0].buildNo).slice(-2) : $store.state.listData.infoS[0].buildNo }}栋</span></h2>
      <!-- <h2>总览信息<span v-if="arr2.infoS[0]">{{ $store.state.listData.infoS[0].community }}小区{{ $store.state.listData.infoS[0].buildNo < 9 ? (Array(2).join(0) + $store.state.listData.infoS[0].buildNo).slice(-2) : $store.state.listData.infoS[0].buildNo }}栋</span></h2> -->
    </div>
    <div class="overview_cont">
      <div class="title">
        <h2>东湖花园小区<span v-if="$store.state.building">{{ $store.state.listData.infoS[0].buildNo < 10 ? (Array(2).join(0) + $store.state.listData.infoS[0].buildNo).slice(-2) : $store.state.listData.infoS[0].buildNo }}栋</span></h2>
        <h3 v-if="$store.state.building"><img src="@/assets/img/position.png" alt=""> {{ $store.state.listData.infoS[0].buildNo < 10 ? $store.state.listData.infoS[0].address.slice(0,1) + '栋' + $store.state.listData.infoS[0].address.slice(1) : $store.state.listData.infoS[0].address.slice(0,2) + '栋' + $store.state.listData.infoS[0].address.slice(2) }}</h3>
      </div>
      <div class="line">
        <img src="@/assets/img/fgx.png" alt="">
      </div>
      <div class="overview_item">
        <div class="item_left">
          <img src="@/assets/img/topleftbj.png" alt="">
        </div>
        <div class="item_cont">
          <ul>
            <li><span>用水人数：</span><span v-if="arr.length !== 0">{{ arr.total }}人</span></li>
            <!-- <li><span>用水人数：</span><span>826人</span></li> -->
            <li><span>多感知水表：</span><span v-if="arr2.length !== 0">{{ arr.dnum }}个</span></li>
            <li><span>无磁水表：</span><span v-if="arr2.length !== 0">{{ arr.wnum }}个</span></li>
            <li><span>联络员：</span><span v-if="arr2.length !== 0">{{ arr.userStr }}</span></li>
            <li><span>已服务次数：</span><span v-if="arr.length !== 0">{{ arr.serveNum }}次</span></li>
            <!-- <li><span>已服务次数：</span><span>389次</span></li> -->
            <li><span>人均服务：</span><span v-if="arr.length !== 0">{{ arr.avgServeNum }}次/人</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      arr: [],
      arr2: [],
      buildNo: '',
      clientType: '',
      buildNo2: 3,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await api.generalData({ buildNo: this.buildNo })
      const res2 = await api.listData({ buildNo: this.buildNo2, clientType: this.clientType })
      // console.log(res)
      this.arr = res.data
      this.arr2 = res2.data
      this.$store.commit('getGeneralData', res.data)
      // this.$store.commit('getListData', res2.data)
    },
    changeBuildNo(id) {
      this.buildNo = id
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.overview_cont {
  padding: 0.6rem 0.17rem 0 0.17rem;
  display: flex;
  flex-direction: column;

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    h2 {
      font-size: 0.22rem;
      color: #fff;
      font-family: 'Pang';
    }

    h3 {
      font-size: 0.12rem;
      color: #fff;
      padding-right: 0.02rem;
      display: flex;
      align-items: center;

      img {
        width: 0.15rem;
        padding-right: 0.05rem;
      }
    }
  }

  .line {
    width: 100%;
    height: 0.1rem;
    position: relative;
    margin: 0.13rem 0;

    img {
      width: 100%;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .overview_item {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .item_left {
      width: 50%;
      height: 1.37rem;
      // border: 1px solid #fff;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .item_cont {
      width: 50%;

      ul {
        width: 100%;
        padding-top: 0.02rem;

        li {
          display: flex;
          margin-bottom: 0.08rem;

          span {
            font-size: 0.12rem;

            &:nth-child(1) {
              color: #fff;
              width: 42%;
              text-align: right;
            }

            &:nth-child(2) {
              color: #17E8FF;
              font-weight: bold;
              padding-left: 0.05rem;
            }
          }
        }
      }
    }
  }
}
</style>